<template>
  <div>
    <div
      class="header-wrap flex-between"
      :style="{
        background:
          this.$route.name == 'home' && !isshowNav ? 'transparent' : '#4629C0',
        marginBottom: isshowNav && this.$route.name == 'home' ? '44px' : '0',
      }"
    >
      <i class="el-icon-s-fold" @click="toggle_nav"></i>
      <div class="logo"></div>
      <ul class="nav-con flex-center" :class="{ isshowNav: isshowNav }">
        <li
          class="nav"
          :class="{ navActive: navDataLight === item }"
          v-for="(item, index) in navData"
          :key="index"
          @click="navActiveClick(item)"
        >
          <div
            class="handhover"
            v-if="item == 'Data Collections'"
            @click="clickmuen"
          >
            <span>Data Collections</span>
            <i v-if="isCollections" class="el-icon-caret-top"></i>
            <i v-else class="el-icon-caret-bottom"></i>
            <!-- 下拉菜单 -->
            <div
              class="childenMuen"
              v-show="isCollections && navDataLight == item"
            >
              <div
                class="childenMuen_item"
                :class="{ act: $route.name === 'toxicity' }"
                @click="navActiveClick('Toxicity Category')"
              >
                Toxicity Category
              </div>
              <div
                class="childenMuen_item"
                :class="{ act: $route.name === 'collectionFeature' }"
                @click="navActiveClick('Multi-Dimensional Feature')"
              >
                Multi-Dimensional Feature
              </div>
              <div
                class="childenMuen_item"
                :class="{ act: $route.name === 'collectionDataSource' }"
                @click="navActiveClick('Aggregated resource')"
              >
                Aggregated resource
              </div>
            </div>
          </div>
          <div class="handhover" v-else>
            {{ item }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navDataLight: "Home",
      navData: [
        "Home",
        "Data Collections",
        "Search",
        "Download",
        "Statistics",
        "Benchmark",
        "Contact & About",
      ],
      isCollections: false,
      isshowNav: false,
    };
  },
  watch: {
    $route(n) {
      if (n.name) {
        switch (this.$route.name) {
          case "home":
            this.navDataLight = "Home";
            break;
          case "toxicity":
            this.navDataLight = "Data Collections";
            break;
          case "collectionDtail":
            this.navDataLight = "Data Collections";
            break;
          case "collectionFeature":
            this.navDataLight = "Data Collections";
            break;
          case "collectionDataSource":
            this.navDataLight = "Data Collections";
            break;
          case "search":
            this.navDataLight = "Search";
            break;
          case "searchBatchResult":
            this.navDataLight = "Search";
            break;
          case "searchCompoundResult":
            this.navDataLight = "Search";
            break;
          case "searchAcuratCompound":
            this.navDataLight = "Search";
            break;
          case "download":
            this.navDataLight = "Download";
            break;
          case "statistics":
            this.navDataLight = "Statistics";
            break;
          case "benchmark":
            this.navDataLight = "Benchmark";
            break;
          case "about":
            this.navDataLight = "Contact & About";
            break;
        }
      }
    },
  },
  methods: {
    handleSelect(key, keyPath) {
    },
    //控件header菜单激活
    navActiveClick(item) {
      this.navDataLight = item;
      let DataCollectionsArr = [
        "Data Collections",
        "Toxicity Category",
        "Multi-Dimensional Feature",
        "Aggregated resource",
      ];
      if (DataCollectionsArr.indexOf(item) === -1) {
        this.isCollections = false;
      }
      // 路由跳转
      if (item == "Home") {
        this.$router.push("/");
      }
      if (item == "Toxicity Category") {
        this.$router.push("/toxicity");
      }
      if (item == "Multi-Dimensional Feature") {
        this.$router.push("/collectionFeature");
      }
      if (item == "Aggregated resource") {
        this.$router.push("/collectionDataSource");
      }
      if (item == "Benchmark") {
        this.$router.push("/benchmark");
      }
      if (item == "Search") {
        this.$router.push("/search");
      }
      if (item == "Download") {
        this.$router.push("/download");
      }
      if (item == "Contact & About") {
        this.$router.push("/about");
      }
      if (item == "Statistics") {
        this.$router.push("/statistics");
      }
    },
    clickmuen() {
      this.isCollections = !this.isCollections;
    },
    toggle_nav() {
      this.isshowNav = !this.isshowNav;
    },
  },
};
</script>

<style lang="scss" scoped>
.header-wrap {
  padding-right: 50px;
  // position: absolute;
  width: 100%;
  // top: 0;
  // z-index: 999;
  .logo {
    margin-left: 30px;
    width: 145px;
    height: 40px;
    background-image: url(~@/assets/img/logo_1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .nav-con {
    .nav {
      position: relative;
      margin: 15px;
      font-size: 14px;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      line-height: 22px;
      color: #ffffff;
      &.navActive {
        color: #11eae8;
      }
      &.navActive::after {
        content: "";
        position: absolute;
        bottom: -10px;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, #05c4f8 0%, #22f483 100%);
      }
    }
    .childenMuen {
      position: absolute;
      top: 40px;
      z-index: 100;
      .childenMuen_item {
        // min-width: 200px;
        white-space: nowrap;
        width: auto;
        height: 40px;
        background: #2b2b2b;
        line-height: 40px;
        padding-left: 10px;
        padding-right: 10px;
        color: #ffffff;
        &:hover,
        &.act {
          background: linear-gradient(90deg, #05c4f8 0%, #22f483 100%);
        }
      }
    }
  }
}
.handhover {
  cursor: pointer;
}
// 响应式设计
.header-wrap {
  .el-icon-s-fold {
    display: none;
    position: absolute;
    top: 5px;
    right: 10px;
    color: #ffffff;
    font-size: 40px;
  }
}
@media screen and (max-width: 768px) {
  .header-wrap {
    flex-direction: column;
    .logo {
      margin-top: 10px;
      margin-left: 30px;
      align-self: flex-start;
    }
    .el-icon-s-fold {
      display: block;
    }
    .nav-con {
      margin-left: 15px;
      align-self: flex-start;
      flex-direction: column;
      display: none;
      transition: all 300ms ease-in-out;
      &.isshowNav {
        display: block;
      }
      .nav {
        align-self: flex-start;
        margin-bottom: 30px;
      }
    }
    .childenMuen {
      left: 110%;
      top: 0px !important;
    }
  }
}
</style>
